<template>
  <div>
    <el-button icon="el-icon-search" circle @click="search"></el-button>
    <el-button @click="add" size="small" type="primary">新增</el-button>

    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="name" label="类型" width="180"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button @click="handleEdit(scope.row)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-sizes="[10, 20, 30, 40]"
      :page-size="size"
      @current-change="search"
      @size-change="handleSizeChange"
      background
      layout="sizes, prev, pager, next, jumper,total"
      :total="total"
    >
    </el-pagination>
    {{ size }}
    <el-dialog
      :title="form.id ? '编辑类型' : '新增类型'"
      @open="onOpen"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="aaform" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="类型名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="isLoading"
          >保 存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      isLoading: false,
      aaa: "123",
      total: 0,
      size: 10,
      rules: {
        name: [
          { required: true, message: "请输入类型名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      form: {
        name: "",
      },
      dialogVisible: false,
      list: [
        // { id: 1, name: "海景房" },
        // { id: 2, name: "大床房" },
        // { id: 3, name: "标准间" },
        // { id: 4, name: "情趣房" },
        // { id: 5, name: "亲子房" },
        // { id: 6, name: "海景房3" },
      ],
    };
  },
  methods: {
    handleSizeChange(size) {
      this.size = size;
      this.search()
    },
    handleEdit(row) {
      this.aaa = "类型编辑";
      //1.查询数据
      //2.弹窗 回显数据
      this.form = JSON.parse(JSON.stringify(row));

      // this.form = Object.assign({}, row);
      // var a = { b: 1 };
      // var c = { d: 2 };
      // var e = Object.assign(a, c);
      this.dialogVisible = true;

      //3.提交

      // this.$message.success(res.data);
      // this.dialogVisible = false;
      // this.search();
    },
    onOpen() {
      // this.form.name = "";
      this.$refs['aaform'].resetFields();
    },
    onSubmit() {
      // if (!this.form.name) {
      //   this.$message.warning("请输入类型名称");
      //   return;
      // }

      this.$refs.aaform.validate((boolean, obj) => {
        if (boolean) {
          // var url = "/hometype/add";
          // if (this.form.id) {
          //   url = "/hometype/update";
          // }
          this.isLoading = true;

          axios({
            baseURL: "/api",
            method: "post",
            // url,
            url: this.form.id ? "/hometype/update" : "/hometype/add",
            // params: this.params, // String usrNo, String passwod
            data: this.form, //@RequestBody LoginDto login
          }).then((res) => {
            this.isLoading = false;
            this.$message.success(res.data);
            this.dialogVisible = false;
            this.search();
          });
        }
      });
    },
    add() {
      this.dialogVisible = true;
      this.aaa = "类型添加";
    },
    search(page = 1) {
      axios({
        baseURL: "/api",
        method: "get",
        // url: "/hometype/search",
        url: "/hometype/searchpage",
        params: { page: page, size: this.size }, // String usrNo, String passwod
        // data: this.params, @RequestBody LoginDto login
      }).then((res) => {
        console.info(res);
        this.list = res.data.list;
        this.total = res.data.total;
      });
    },
    handleDelete(row) {
      this.$confirm("是否删除" + row.name + ", 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            baseURL: "/api",
            method: "post",
            url: "/hometype/delete",
            params: { id: row.id }, // String usrNo, String passwod
            // data: this.params, @RequestBody LoginDto login
          }).then((res) => {
            console.info(res);
            this.$message(res.data);
            this.search();
          });
        })
        .catch(() => {});
    },
  },
  created() {
    this.search();
  },
};
</script>

<style>
</style>